<template>
  <div class="service_index">
    <p style="color: #fdfdab; text-align: center; font-size: 24px">
      服务监控面板 <br />
      {{ time | time }}
    </p>
    <el-row>
      <el-col :span="8" style="margin-bottom: 20px">
        <dv-border-box-1 style="height: 410px">
          <p class="_title">服务访问Top10</p>
          <ul class="_a_ul">
            <li class="_a_li">
              服务数 <br />
              <span style="color: #f03200">{{
                topData.serviceCount | numFormat
              }}</span>
              个
            </li>
            <li class="_a_li">
              api数 <br />
              <span style="color: #f03200">{{
                topData.apiCount | numFormat
              }}</span>
              个
            </li>
            <li class="_a_li" style="border: none">
              访问量 <br />
              <span style="color: #f03200">{{
                topData.requestCount | numFormat
              }}</span>
              次
            </li>
          </ul>
          <dv-capsule-chart
            :config="config_c_a"
            style="width: 95%; height: 280px; margin-left: 20px"
          />
        </dv-border-box-1>
      </el-col>
      <el-col :span="8" style="margin-bottom: 20px">
        <dv-border-box-1 style="height: 410px">
          <p class="_title">服务异常概况</p>
          <dv-scroll-board
            :config="config_b_a"
            style="
              width: 95%;
              height: 310px;
              margin-left: 20px;
              margin-top: 10px;
            "
          />
        </dv-border-box-1>
      </el-col>
      <el-col
        :span="8"
        style="margin-bottom: 20px"
        v-for="(i, index) in list"
        :key="index"
      >
        <dv-border-box-1 style="height: 410px">
          <p class="_title" style="margin: 0; padding-bottom: 0">
            {{ i.name }}
            <span :class="i.status == 1 ? '_red' : '_green'"></span
            ><span :class="i.status == 1 ? '_red_text' : '_green_text'">{{
              i.status == 1 ? "离线" : "在线"
            }}</span>
          </p>
          <ul class="_b_ul">
            <li class="_b_li">
              <span style="color: #ddd166">{{
                i.apiOpenCount | numFormat
              }}</span>
              /
              {{ i.apiCount | numFormat }}
              <br />
              API启用数
            </li>
            <li class="_b_li">
              <span style="color: #ddd166">{{
                i.successCount | numFormat
              }}</span>
              /
              {{ i.allCount | numFormat }}
              <br />
              访问成功数
            </li>
            <li class="_b_li" style="border: none">
              <span style="color: #ddd166">{{ i.allCount | numFormat }}</span>
              <br />
              当日访问量
            </li>
          </ul>
          <div
            :id="'main_' + index"
            :style="{
              width: '95%',
              height: '280px',
              marginLeft: '10px',
            }"
          ></div>
        </dv-border-box-1>
      </el-col>
    </el-row>
    <el-row> </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: new Date(),
      config_b_a: {
        header: ["服务名称", "异常数量", "异常率"],
        data: [],
        columnWidth: [300, 200, 200],
        oddRowBGC: "rgba(255,255,255,0.1)",
        evenRowBGC: "rgba(255,255,255,0.2)",
      },
      config_c_a: {
        data: [],
        colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
        unit: "次",
        showValue: true,
      },
      topData: {},
      list: [],
      flag: true,
    };
  },
  watch: {},
  mounted() {
    this.getNowTime();
    this.getInfo();
    this.getInfo2();
  },
  updated() {},
  methods: {
    getNowTime() {
      this.time = new Date();
      setTimeout(() => {
        this.getNowTime();
      }, 1000);
    },
    drawLine3(index, info) {
      var time = [];
      var lookNum = [];
      var CGL = [];
      for (var i in info) {
        time.push(info[i].hour);
        lookNum.push(info[i].count);
        CGL.push(info[i].successPercent * 100);
      }
      // 基于准备好的dom，初始化echarts实例
      var idName = "main_" + index;
      let myChart = this.$echarts.init(document.getElementById(idName));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["访问数", "成功率"],
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            data: time,
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "访问数",
            axisLabel: {
              formatter: "{value} 次",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
          {
            type: "value",
            name: "成功率",
            axisLabel: {
              formatter: "{value} %",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "访问数",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 次";
              },
            },
            data: lookNum,
            itemStyle: {
              color: "rgb(0,186,255)",
            },
          },
          {
            name: "成功率",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: CGL,
            itemStyle: {
              color: "rgb(230,144,209)",
            },
          },
        ],
      });
    },
    getInfo() {
      var endTime = this.setTime(new Date());
      var startTime = this.setTime2(new Date());
      this.config_c_a.data = [];
      this.config_b_a.data = [];
      //   接口1
      this.$get(
        baseUrl.fwIp +
          "/T1/api/v1/Platform/Home/ServiceTop?startTime=" +
          startTime +
          "&endTime=" +
          endTime
      ).then((res) => {
        this.topData = res.data;
        for (var i in res.data.top) {
          this.config_c_a.data.push({
            name: res.data.top[i].name,
            value: res.data.top[i].count,
          });
        }
        this.config_c_a = { ...this.config_c_a };
      });
      //    接口2
      this.$get(
        baseUrl.fwIp +
          "/T1/api/v1/Platform/Home/ErrorAllList?startTime=" +
          startTime +
          "&endTime=" +
          endTime
      ).then((res) => {
        for (var i in res.data) {
          this.config_b_a.data.push([
            res.data[i].name,
            res.data[i].errorCount,
            Math.round(res.data[i].errorPercent * 100) + "%",
          ]);
        }
        this.config_b_a = { ...this.config_b_a };
      });
    },
    getInfo2() {
      var endTime = this.setTime(new Date());
      var startTime = this.setTime2(new Date());
      this.$get(
        baseUrl.fwIp +
          "/T1/api/v1/Platform/Home/ServiceInfoList?startTime=" +
          startTime +
          "&endTime=" +
          endTime
      ).then((res) => {
        this.list = res.data;
        this.$nextTick(function () {
          var a = document.getElementById("main_0");
          if (a) {
            for (var i in res.data) {
              this.drawLine3(i, res.data[i].hourData);
            }
          } else {
            this.getInfo2();
          }
        });
      });
    },
    setTime(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
    setTime2(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          "00" +
          ":" +
          "00" +
          ":" +
          "00";
        return times;
      }
    },
  },
  filters: {
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "年" +
          month +
          "月" +
          day +
          "日 " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
    numFormat(num) {
      var c =
        num.toString().indexOf(".") !== -1
          ? num.toLocaleString()
          : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");

      return c;
    },
  },
};
</script>

<style>
.service_index {
  background-color: #04133d;
  height: 100vh;
  overflow: auto;
}
._title {
  padding: 20px;
  color: #fdfdab;
  font-size: 18px;
  margin: 0;
  margin-bottom: 0;
  font-weight: 700;
}
._a_ul {
  padding: 20px;
  color: #ffffe6;
  font-size: 16px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
._a_li {
  display: inline-block;
  width: 33.3%;
  border-right: 1px solid #ffffe6;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  /* border-radius: 5px; */
  padding: 5px 0;
}
._a_div {
  padding: 20px;
  padding-top: 0;
}
._a_round_li {
  display: inline-block;
  width: 84px;
  border: 3px solid #ffffe6;
  border-radius: 50%;
  color: #ffffe6;
  text-align: center;
  padding: 17px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-right: 3px;
}
._b_ul {
  padding: 20px;
  color: #ffffe6;
  font-size: 16px;
  margin: 0;
}
._b_li {
  display: inline-block;
  width: 33.3%;
  border-right: 1px solid #ffffe6;
  text-align: center;
  padding: 5px 0;
}
._red {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: red;
  box-shadow: 0 0 4px red;
}
._green {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgb(18, 240, 37);
  box-shadow: 0 0 4px rgb(146, 255, 51);
}
._green_text {
  font-size: 12px;
  margin-left: 2px;
  color: rgb(18, 240, 37);
}
._red_text {
  font-size: 12px;
  margin-left: 2px;
  color: red;
}
</style>
